---
/**
 * Category Archive
 *
 * Demonstrates:
 * - getTerm for fetching taxonomy term details
 * - getEntriesByTerm for entries with a specific term
 */

import { getTerm, getEntriesByTerm } from "emdash";
import Base from "../../layouts/Base.astro";
import PostCard from "../../components/PostCard.astro";

const { slug } = Astro.params;

const category = await getTerm("categories", slug!);
const posts = await getEntriesByTerm("posts", "categories", slug!);

if (!category) {
	return Astro.redirect("/404");
}
---

<Base title={category.label}>
	<div class="container">
		<div class="content-width">
			<header class="archive-header">
				<h1>{category.label}</h1>
			</header>

			{
				posts.length > 0 ? (
					<div class="posts-list">
						{posts.map((post) => (
							<PostCard
								title={post.data.title}
								href={`/posts/${post.data.slug || post.id}`}
								date={post.data.published_at}
								excerpt={post.data.excerpt}
								featuredImage={
									post.data.featured_image?.src
										? {
												src: post.data.featured_image.src,
												alt: post.data.featured_image.alt || post.data.title,
											}
										: undefined
								}
							/>
						))}
					</div>
				) : (
					<p class="text-muted">No posts in this category.</p>
				)
			}
		</div>
	</div>
</Base>